﻿<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>

<div id="contenidoEventos">
	<div class="principalEventos">
		<!-- 
		<p class="imagenPrincipalResumenAlbum">Payasos, cuentacuentos, marionetas, ambientación musical... Las mejores animaciones para
niños de la mano de actores y monitores experimentados. Precio mínimo orientativo: 200 euros</p> -->
		
	</div>
	<div class="principalAlbum">
		<!-- <hr class="linea" />
		<div class="rubricaCentrada">Echa un vistazo. . . a nuestras animaciones infantiles</div>
		<hr class="linea" /> -->
		<div id="gallery" class="content">
			<div id="controls" class="controls"></div>
			<div class="slideshow-container">
				<div id="loading" class="loader"></div>
				<div id="slideshow" class="slideshow"></div>
			</div>
			<div id="caption" class="caption-container"></div>
		</div>
		
		<div id="thumbs" class="navigation">
			<ul class="thumbs noscript">
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion26.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion26.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion0.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion0.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion00.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion00.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion6.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion6.jpg"/>'
						alt="" />
				</a></li>

				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion1.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion1.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion2.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion2.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion3.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion3.jpg"/>'
						alt="" />
				</a></li>

				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion14.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion14.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion6.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion6.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion19.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion19.jpg"/>'
						alt="" />
				</a></li>

				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion35.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion35.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion36.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion36.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion37.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion37.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion38.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion38.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion40.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion40.jpg"/>'
						alt="" />
				</a></li>
				
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion38.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion38.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion39.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion39.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion40.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion40.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion41.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion41.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion42.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion42.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion43.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion43.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion44.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion44.jpg"/>'
						alt="" />
				</a></li>

				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion45.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion45.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion46.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion46.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion49.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion49.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion68.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion68.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion98.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion98.jpg"/>'
						alt="" />
				</a>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion109.pg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion109.jpg"/>'
						alt="" />
				</a></li>
				<li><a class="thumb"
					href='<c:url value="/images/eventos/infantil/animacion/slides/animacion107.jpg"/>'
					title=""> <img
						src='<c:url value="/images/eventos/infantil/animacion/thumbs/animacion107.jpg"/>'
						alt="" />
				</a></li>

			</ul>
		</div>
		<!-- End Advanced Gallery Html Containers -->
		<div style="clear: both;"></div>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				// We only want these styles applied when javascript is enabled
				$('div.navigation').css({
									'width' : '273px',
									'float' : 'left',
									'padding-left' : '4em'
								});
				$('div.content').css('display', 'block');

				// Initially set opacity on thumbs and add
				// additional styling for hover effect on thumbs
				var onMouseOutOpacity = 0.67;
				$('#thumbs ul.thumbs li').opacityrollover({
					mouseOutOpacity:   onMouseOutOpacity,
					mouseOverOpacity:  1.0,
					fadeSpeed:         'fast',
					exemptionSelector: '.selected'
				});
				
				// Initialize Advanced Galleriffic Gallery
				var gallery = $('#thumbs').galleriffic({
					delay:                     2500,
					numThumbs:                 15,
					preloadAhead:              10,
					enableTopPager:            true,
					enableBottomPager:         true,
					maxPagesToShow:            7,
					imageContainerSel:         '#slideshow',
					controlsContainerSel:      '#controls',
					captionContainerSel:       '#caption',
					loadingContainerSel:       '#loading',
					renderSSControls:          true,
					renderNavControls:         true,
					playLinkText:              'Reproducci&oacute;n Autom&aacute;tica',
					pauseLinkText:             'Parar Reproducci&oacute;n',
					prevLinkText:              '&lsaquo; Foto Anterior',
					nextLinkText:              'Siguiente Foto &rsaquo;',
					nextPageLinkText:          'Siguiente &rsaquo;',
					prevPageLinkText:          '&lsaquo; Anterior',
					enableHistory:             true,
					autoStart:                 false,
					syncTransitions:           true,
					defaultTransitionDuration: 900,
					onSlideChange:             function(prevIndex, nextIndex) {
						// 'this' refers to the gallery, which is an extension of $('#thumbs')
						this.find('ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
					},
					onPageTransitionOut:       function(callback) {
						this.fadeTo('fast', 0.0, callback);
					},
					onPageTransitionIn:        function() {
						this.fadeTo('fast', 1.0);
					}
				});

				/**** Functions to support integration of galleriffic with the jquery.history plugin ****/

				// PageLoad function
				// This function is called when:
				// 1. after calling $.historyInit();
				// 2. after calling $.historyLoad();
				// 3. after pushing "Go Back" button of a browser
				function pageload(hash) {
					// alert("pageload: " + hash);
					// hash doesn't contain the first # character.
					if(hash) {
						$.galleriffic.gotoImage(hash);
					} else {
						gallery.gotoIndex(0);
					}
				}

				// Initialize history plugin.
				// The callback is called at once by present location.hash. 
				$.historyInit(pageload, "advanced.html");

				// set onlick event for buttons using the jQuery 1.3 live method
				$("a[rel='history']").live('click', function(e) {
					if (e.button != 0) return true;
					
					var hash = this.href;
					hash = hash.replace(/^.*#/, '');

					// moves to a new page. 
					// pageload is called at once. 
					// hash don't contain "#", "?"
					$.historyLoad(hash);

					return false;
				});

				/****************************************************************************************/
			});
		</script>
	</div>
	<!-- </div> -->
</div>